<template>
  <div class="true-list">
     <el-tree
      :data="list"
      node-key="id"
      default-expand-all
      :props="props"
      :expand-on-click-node="false"
      :filter-node-method="filterNode"
      ref="tree"
      >
      <span class="custom-tree-node" slot-scope="{ node, data }">
        <span>{{ node.label }}</span>
        <span>
          <el-button
            
            type="primary"
            size="mini"
            @click="$emit('addRow',true,'添加子类',data,0)">
            添加子类
          </el-button>
          <el-button
            
            type="success"
            size="mini"
            @click="$emit('addRow',true,'修改子类',data)">
            修改
          </el-button>
          <el-button
            type="danger"
            size="mini"
            @click="$emit('delRow',data)">
            删除
          </el-button>
        </span>
      </span>
    </el-tree>
  </div>
</template>

<script>
let id = 1000;
  export default {
    props:{
      searchText:{
        type: String,
        default:''
      },
      list:{
        type: Array,
        default:() =>[]
      },
      btnAdd:{
        type:Boolean,
        default:true
      },
      btnUpdate:{
        type:Boolean,
        default: true
      },
      btnDelete:{
        type:Boolean,
        default: true
      }
    },
    data(){
      return{
        props:{
          label:'name',
          children:'children'
        }
      }
    },
    methods:{
      filterNode( value,data){
        if(!value) return true
        return data.name.indexOf(value) !== -1
      }
    },
    watch:{
      searchText(newVal){
        this.$refs.tree.filter(newVal)
      }
    }
  };
</script>
<style>

</style>
<style scoped>
  .custom-tree-node {
    flex: 1;
    margin: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
  }


</style>